<template>
  <div class="border-b-2 border-white dark:border-gray-700">
      <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-600 dark:text-gray-400">
          <li class="me-2" v-for="(item, index) in categoryList" :key="index">
              <a @click="changeActive(index)" :class="activeIndex === index ? 'active' : '' " class="hand-style inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-sky-400 dark:hover:text-gray-300 group">
                  <svg-icon class="w-4 h-4 me-1 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300"
                    :iconName="categoryListEn[index]"></svg-icon>{{ item }}
              </a>
          </li>
      </ul>
  </div>
</template>
<script setup>
import pinyin from 'js-pinyin'
import { ref } from 'vue'

const props = defineProps({
  // categoryList: {
  //   type: Array,
  //   default: () => []
  // },
  handleAcitve: {
    type: Function,
    default: () => {}
  }
  
})


// 声明对外暴露handleAcitve的emit提交方法
const emit = defineEmits(['handleAcitve'])
// changeActive事件
const changeActive = (index) => {
    ActiveCategoryId.value = index
    emit('handleAcitve', activeIndex.value = index)
}

const ActiveCategoryId = ref(null)

// 子传父
// 暴露子组件的ActiveCategoryId
// 父组件可以通过ref获取子组件的ActiveCategoryId
defineExpose({ActiveCategoryId})

// 高亮索引
const activeIndex = ref(0)

// 定义固定分类中文列表 index就是对应categoryId
const categoryList = ref(['最新', '最热', '后端开发', '前端开发', '实用工具', '其它'])
// 定义固定分类英文列表
const categoryListEn = ref(['icon-ZuiXin', 'icon-ZuiRe', 'icon-HouDuanKaiFa', 'icon-QianDuanKaiFa', 'icon-ShiYongGongJu', 'icon-QiTa'])


// import { getCategoryList, getCategoryArticlePageList } from '@/api/frontend/category'






// // 当前页
// const current = ref(1)
// // 每页大小
// const size = ref(2)

// 将点击的下标索引给activeIndex
// const changeActive = async (index) => {
//   activeIndex.value = index
//   // 还需要调用分页请求
//   const res = await getCategoryArticlePageList({
//     current: current.value,
//     size: size.value,
//     id: index
//   })
//   console.log(res);
  
// }

// // 获取分类
// const getCategory = async () => {
//   const res = await getCategoryList()
//   if (res.success) {
//     console.log(res.data);
//   }
// }
// getCategory()

</script>
<style scoped>
.active {  
  --tw-text-opacity: 1;  
    
  --tw-border-opacity: 1;  
  border-color: rgb(228 116 112 / var(--tw-border-opacity));  
}  
</style>